<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import { ref } from "vue";
 
const form = ref({
  username: "",
  password: "",
});
</script>

<template>
  <el-row class="box">
    <el-col :span="16" class="hello">
      <div class="h1">
        <h1>欢迎光临</h1>
      </div>
    </el-col>
    <el-col :span="8" class="login">
      <el-card class="logintop">
        <template #header>
          <div class="card-header">
            <h2>欢迎回来</h2>
            <p>账号密码登录</p>
          </div>
        </template>
        <el-form
          :model="form"
          :rules="rules"
          :inline="false"
          size="normal"
          class="elForm"
        >
          <el-form-item label="账号">
            <el-input v-model="form.username"  :prefix-icon="User"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="form.password"  :suffix-icon="Unlock"></el-input>
          </el-form-item>

          <el-form-item class="dl">
            <el-button type="primary" @click="onSubmit">登录</el-button>
            <el-button>注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.box {
  min-width: 100vw;
  min-height: 100vh;
}
.box .hello {
  /* text-align: center;
    margin-top: 30%; */
  height: 100vh;
  width: 100vw;
  @apply bg-green-600;
  @apply flex justify-center items-center;
}
.hello .h1 {
  @apply text-4xl font-600 text-light-50 text-shadow-lg;
}
.box .login {
  height: 100vh;
  width: 100vw;
  @apply bg-dark-50 flex justify-center items-center;
}
.login .logintop {
  height: 300px;
  width: 420px;
}
.card-header h2 {
  @apply text-2xl font-600 text-shadow-lg flex justify-center items-center;
}
.card-header p {
  @apply text-sm font-400 text-shadow-lg flex justify-center items-center mt-2;
}
.login .logintop .elForm .dl{
    margin-left: 35%;
}
</style>